<template>
  <view class="content">
    <!-- 顶部轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" :mode="mode"
      :dots-styles="dotsStyles" field="content">
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view class="swiper-item" :class="'swiper-item' + index">
            <image :src="item.image" mode="aspectFill" class="swiper-image"></image>
            <view class="swiper-title">{{item.title}}</view>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 标签页导航 -->
    <uni-section title="展览导航" type="line">
      <view class="tab-bar">
        <view :class="{ active: currentTab === 0 }" class="tab-item" @click="switchTab(0)">
          <text class="tab-text">预告</text>
        </view>
        <view :class="{ active: currentTab === 1 }" class="tab-item" @click="switchTab(1)">
          <text class="tab-text">预约</text>
        </view>
        <view :class="{ active: currentTab === 2 }" class="tab-item" @click="switchTab(2)">
          <text class="tab-text">回顾</text>
        </view>
      </view>
    </uni-section>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 预告内容 -->
      <view v-if="currentTab === 0" class="tab-content">
        <view class="exhibition-preview" v-for="(exhibition, index) in previewExhibitions" :key="index">
          <image :src="exhibition.image" mode="aspectFill" class="exhibition-image"></image>
          <view class="exhibition-info">
            <view class="exhibition-date">{{exhibition.date}}</view>
            <view class="exhibition-title">{{exhibition.title}}</view>
            <view class="exhibition-desc">{{exhibition.description}}</view>
          </view>
        </view>
      </view>

      <!-- 预约内容 -->
      <view v-if="currentTab === 1" class="tab-content">
        <view class="reservation-form">
          <view class="form-item">
            <text class="form-label">姓名</text>
            <input type="text" placeholder="请输入姓名" class="form-input" v-model="reservation.name" />
          </view>
          <view class="form-item">
            <text class="form-label">电话</text>
            <input type="tel" placeholder="请输入手机号码" class="form-input" v-model="reservation.phone" />
          </view>
          <view class="form-item">
            <text class="form-label">参观日期</text>
            <picker mode="date" :value="reservation.date" start="2023-01-01" end="2025-12-31" @change="onDateChange">
              <view class="picker">
                {{reservation.date}}
              </view>
            </picker>
          </view>
          <view class="form-item">
            <text class="form-label">预约数量</text>
            <input type="number" min="1" placeholder="请输入预约数量" class="form-input" v-model="reservation.amount" />
          </view>
          <view class="form-item">
            <text class="form-label">参观时段</text>
            <picker :range="timeSlots" @change="onTimeChange" :value="reservation.timeIndex">
              <view class="picker">
                {{timeSlots[reservation.timeIndex]}}
              </view>
            </picker>
          </view>
          <button class="reservation-button" @click="submitReservation">提交预约</button>
        </view>
      </view>

      <!-- 回顾内容 -->
      <view v-if="currentTab === 2" class="tab-content">
        <view class="exhibition-review" v-for="(exhibition, index) in reviewExhibitions" :key="index">
          <image :src="exhibition.image" mode="aspectFill" class="exhibition-image"></image>
          <view class="exhibition-info">
            <view class="exhibition-title">{{exhibition.title}}</view>
            <view class="exhibition-desc">{{exhibition.description}}</view>
            <view class="exhibition-actions">
              <button class="view-detail-btn" @click="viewReviewDetail(exhibition.id)">查看详情</button>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { createReservation } from '@/api/system/reservation';

export default {
  data() {
    return {
      // 轮播图数据
      banners: [
        { image: 'https://picsum.photos/800/400?random=1', title: '美术馆欢迎您' },
        { image: 'https://picsum.photos/800/400?random=2', title: '最新展览资讯' },
        { image: 'https://picsum.photos/800/400?random=3', title: '艺术欣赏之旅' }
      ],

      // 轮播指示器配置
      info: [
        { content: '幻灯片1' },
        { content: '幻灯片2' },
        { content: '幻灯片3' }
      ],
      current: 0,
      mode: 'dot',
      dotsStyles: {},
      swiperDotIndex: 0,
      modeIndex: 1,
      styleIndex: 0,

      // 标签页状态
      currentTab: 0,

      // 预告展览数据
      previewExhibitions: [
        {
          id: 1,
          image: 'https://picsum.photos/300/200?random=10',
          date: '2025-06-15 至 2025-07-15',
          title: '丝路新画卷——当代艺术展',
          description: '本次展览汇集了国内外艺术家以丝路为主题的绘画、雕塑等作品，展现丝路文化的传承与创新。'
        },
        {
          id: 2,
          image: 'https://picsum.photos/300/200?random=11',
          date: '2025-07-20 至 2025-08-20',
          title: '西域风情——新疆民间艺术展',
          description: '展览通过丰富的民间艺术品，展示新疆各民族的传统文化和艺术特色。'
        }
      ],

      // 回顾展览数据
      reviewExhibitions: [
        {
          id: 1,
          image: 'https://picsum.photos/300/200?random=20',
          title: '印象新疆——摄影作品展',
          description: '本次展览展出了多位摄影师镜头下的新疆自然风光和人文风情，吸引了大量观众参观。'
        },
        {
          id: 2,
          image: 'https://picsum.photos/300/200?random=21',
          title: '传统与现代——新疆油画展',
          description: '展览汇集了新疆本土油画家的优秀作品，展现了传统与现代交融的艺术魅力。'
        }
      ],

      // 预约表单数据
      reservation: {
        name: '',
        phone: '',
        date: this.getTodayDate(),
        timeIndex: 0,
        amount: 1
      },

      // 预约时段选项
      timeSlots: ['上午 09:00-12:00', '下午 13:00-16:00', '晚上 17:00-20:00'],

      // 指示器样式配置

    };
  },
  methods: {
    // 获取当前日期
    getTodayDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    // 轮播图切换事件
    change(e) {
      this.current = e.detail.current;
      this.swiperDotIndex = e.detail.current;
    },

    // 点击轮播指示器
    clickItem(e) {
      this.swiperDotIndex = e.index;
    },

    // 选择指示器模式
    selectMode(mode, index) {
      this.mode = mode;
      this.modeIndex = index;
    },

    // 选择指示器样式
    selectStyle(index) {
      this.styleIndex = index;
    },

    // 切换标签页
    switchTab(index) {
      this.currentTab = index;
    },

    // 日期选择变化
    onDateChange(e) {
      this.reservation.date = e.detail.value;
    },

    // 时段选择变化
    onTimeChange(e) {
      this.reservation.timeIndex = e.detail.value;
    },

    submitReservation() {
      // 表单校验
      if (!this.reservation.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' });
        return;
      }
      if (!this.reservation.phone || !/^1[3-9]\d{9}$/.test(this.reservation.phone)) {
        uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
        return;
      }
      if (!this.reservation.amount || isNaN(this.reservation.amount) || parseInt(this.reservation.amount) <= 0) {
        uni.showToast({ title: '请输入正确的预约数量', icon: 'none' });
        return;
      }
      uni.showLoading({ title: '提交中...' });
      // 构造要提交的数据，字段名与后端一致
      const postData = {
        name: this.reservation.name,
        phoneNum: this.reservation.phone,
        date: this.reservation.date,
        amount: parseInt(this.reservation.amount)
        // 可扩展：unitPrice、timeSlot等
      };
      createReservation(postData)
        .then(res => {
          uni.hideLoading();
          if (res.code === 200) {
            uni.showToast({ title: '预约成功！', icon: 'success' });
            // 重置表单
            this.reservation = {
              name: '',
              phone: '',
              date: this.getTodayDate(),
              timeIndex: 0,
              amount: 1
            };
          } else {
            uni.showToast({ title: res.msg || '预约失败', icon: 'none' });
          }
        })
        .catch(err => {
          uni.hideLoading();
          uni.showToast({ title: '预约失败，请稍后重试', icon: 'none' });
          console.error('预约失败', err);
        });
    },
    // 查看回顾详情
    viewReviewDetail(id) {
      // 这里可以导航到详情页
      uni.showModal({
        title: '展览详情',
        content: `展览ID: ${id}\n更多详情将在后续版本中展示`,
        showCancel: false
      });
    }
  }
};
</script>

<style>
.content {
  padding: 10px;
  background-color: #f5f5f5;
}

.swiper-box {
  width: 100%;
  height: 200px;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.swiper-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
}

.tab-item {
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #007AFF;
  color: #fff;
}

.tab-text {
  font-size: 16px;
}

.tab-content {
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.exhibition-preview, .exhibition-review {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.exhibition-image {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-right: 10px;
}

.exhibition-info {
  flex: 1;
}

.exhibition-date {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.exhibition-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.exhibition-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.exhibition-actions {
  margin-top: 10px;
}

.view-detail-btn {
  background-color: #007AFF;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
}

.reservation-form {
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.form-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.picker {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  color: #666;
}

.reservation-button {
  width: 100%;
  height: 40px;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 10px;
}

.example-body {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}

.example-body-item {
  width: 20%;
  text-align: center;
  padding: 10px 0;
}

.example-body-item.active {
  color: #007AFF;
}

.example-body-item-text {
  font-size: 14px;
}

.example-body-dots {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px;
}
</style>